<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
	<table border='1'>
		<tr>
			<td>操作</td>
			<td>id</td>
			<td>姓名</td>
			<td>年龄</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="aaa" n="1" info="{id: 1, name: 'zch1', age: 12}">
				<input type="hidden">1
			</td>
			<td style="display: none">123</td>
			<td>小红</td>
			<td>123</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="aaa" n="2" info="{id: 2, name: 'zch2', age: 12}"></td>
			<td>效率</td>
			<td>123</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="aaa" n="3" info="{id: 3, name: 'zch3', age: 22}"></td>
			<td>小兰</td>
			<td>123</td>
		</tr>
	</table>
	<input type="file" onchange="show()">
	<hr>
	<input type="file" id="file" size="2" onchange="show(this)">
	<hr>
	<!-- <input type="file" id="excelFile" size='5' onchange="show(this)" />    -->
	<!-- <hr>  -->
	<!-- <input id="excelFile" size='5'  type="file" onchange="importPlan(this)" />  -->
	<!-- <input id="aa" type="text" onchange="importPlan(this)"/> -->
	<input type="text" onchange="show()">

	<button id="btn">按钮</button>
	<!-- <input id="excelFile" size='5' type="file" onchange="importPlan(this)" /> -->
	<!--  <input id="excelFile"  size='5' type="file" onchange="importPlan(this)" />         -->
	<input id="excelFile" size='5' type="file" onchange="importPlan(this)" />      
	<script type="text/javascript">

		// var file1 = document.getElementById("excelFile")
		// console.log(file1)



		// var file = document.getElementById("file").files[0]
		// var f = document.getElementById('file')
		// console.log(file)
		// console.log(f)


		function importPlan(obj) {
			var pathName = $("#excelFile").val()
			var suffix = pathName.substring(pathName.lastIndexOf('.') + 1, pathName.length);
			if ((suffix != "xls") && (suffix != "xlsx")) {
				alert("请选择excel文件！");
				return;
			} else {
				console.log(obj);
				var file = $("#excelFile")[0];
				console.log('file' + file);
				$.ajax({
					// url: '${pageContext.request.contextPath }/examineMonth.do?method=analysisExcel',
					url: 'https://www.baidu.com/',
					
					type: 'POST',
					data: file,
					dataType: "json",
					cache: false,//上传文件无需缓存
					processData: false,//用于对data参数进行序列化处理 这里必须false
					contentType: false, //必须
					error: function () { alert('执行出错,请联系管理员!'); },
					success: function (result) {
						if (result) {
							alert("上传成功，请刷新页面");
						}
					}

				});
			}
		}






		function importPlan1(obj) {
			var pathName = $("#excelFile").val()
			console.log(pathName);

			var suffix = pathName.substring(pathName.lastIndexOf('.') + 1, pathName.length);
			if ((suffix != "xls") && (suffix != "xlsx")) {
				alert("请选择excel文件！");
				return;
			} else {
				// console.log(obj);
				var file = document.getElementById("excelFile")
				var file1 = $('#excelFile')
				// console.log(file);
				// console.log(file1);
				var file2 = document.getElementById("excelFile")
				var file3 = document.getElementById("excelFile").files[0]

				// file2.files[0]
				var file3 = $('#excelFile')[0].files[0]
				// console.log(file2);
				// console.log(file3);
				console.log(file2.files);
				console.log(file2.files[0]);
				console.log(file3)
				console.log(file3)
			}
		}



		function show() {
			console.log(123)
			// var file = document.getElementById("File").files[0];
			var file = document.getElementById("excelFile").files[0];
			console.log(document.getElementById("excelFile"))



		}
		document.querySelector('#file').addEventListener('change', function () {
			console.log(this.files[0])
			console.log(this.files)
			var reader = new FileReader()
			// 发送异步请求
			// 0.使用readAsText方法（读取结果普通文本）
			console.log(reader)
			reader.readAsText(this.files[0])
			// 读取成功的结果：已经成功读取文件（计算机上的文件read.txt）
			reader.onload = function () {
				//读取完成后，数据保存在对象的result属性中
				// console.log(this.result)//打印：已经成功读取文件
			}
		})

		$(function () {
			var person = [
				{ id: 1, name: 'zch1', age: 12 },
				{ id: 2, name: 'zch2', age: 12 },
				{ id: 3, name: 'zch3', age: 12 },
			]
			$('#btn').click(function () {
				var set = [];
				$('table tr').each(function () {
					var row = [];
					$(this).find('td').each(function () {
						row.push($(this).text());
					});
					set.push(row);
				});
				console.log(set)
				var a = $("input:checkbox[name='aaa']:checked");
				var p = [];
				var change = []
				// console.log($("input:checkbox[name='aaa']:checked").parent())
				// $("input:checkbox[name='aaa']:checked").parent().parent().each(function () {
				// 	var row = [];
				// 	$(this).find('td').each(function () {
				// 		row.push($(this).text());
				// 	})
				// 	change.push(row)
				// });
				// console.log('change:'+ change)

				$("input:checkbox[name='aaa']:checked").each(function (i, item) {
					p.push($(this).attr('n'))
					var row = []
					$(this).parent().parent().find('td').each(function () {
						console.log($(this).text())
						row.push($(this).text());
					})
					change.push(row)
				})
				console.log('change:' + change)

				var newPerson = []
				for (let i = 0; i < p.length; i++) {
					console.log(p[i])
					var temp = person.filter(function (item) {
						return item.id == p[i];
					});
					newPerson.push(temp)
				}
				console.log(newPerson)
			})
		})

	</script>

</body>

</html>